<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>登录 | SpringForAll - Spring Security</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body style="background-color: #f1f1f1; padding-bottom: 0">

{% include 'header.html' %}
<div class="container" style="margin-top: 60px">

    <div style="text-align: center; margin-top: 10%">
        <img src="http://upload.jianshu.io/users/upload_avatars/3424642/fb55f16faaf6.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240" alt="avatar" class="img-circle" style="margin: 0 auto">
        <p style="margin-top: 25px; font-size: 20; color: crimson">Anoy</p>
        <form action="/user/logout/" method="post">
            <button class="btn btn-danger" style="margin-top: 20px">退出登录</button>
        </form>
    </div>


<table class="table table-striped">
  <thead>
    <tr>
      <th hidden>ID</th>
        <th>头像</th>
      <th>姓名</th>
      <th>密码</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    {% for user in users %}
    <tr>
      <td hidden>{{user.id}}</td>
        <td><img class="img-circle" src="/{{user.img}}" style="width:50px; height:50px;"></td>
      <td>{{user.username}}</td>
      <td>{{user.password}}</td>
      <td><button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal">修改</button>
          <span style="margin:0 5px"></span>
          <a type="button" href="/user/delete?id={{user.id}}" class="btn btn-danger btn-sm">删除</a></td>
    </tr>
    {% endfor %}
  </tbody>



</table>
    <ul class="pagination pagination-lg" style="float:right;">
          <li><a href="#">&laquo;</a></li>
          <li><a href="/user/list/?page=1&rows=5">1</a></li>

          {% if totalpage >= 2 %}
          <li><a href="/user/list/?page=2&rows=5">2</a></li>
          {% endif %}
          {% if totalpage >= 3 %}
          <li><a href="/user/list/?page=3&rows=5">3</a></li>
          {% endif %}
          {% if totalpage >= 4 %}
          <li><a href="/user/list/?page=4&rows=5">4</a></li>
          {% endif %}
          {% if totalpage >= 5 %}
          <li><a href="/user/list/?page=5&rows=5">5</a></li>
          {% endif %}
         <li><a href="#">&raquo;</a></li>
    </ul>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
             <form action="/user/update/" method="post">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">用户信息修改</h4>
                </div>
                <div class="panel-body">
                    <input type="hidden"  name="id" id="id" value="">
                    <div class="form-group" style="margin-top: 30px">
                        <div class="input-group col-md-6 col-md-offset-3">
                            <div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>
                            <input type="text" class="form-control" name="username" id="username" value="" placeholder="账号">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group col-md-6 col-md-offset-3">
                            <div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
                            <input type="password" class="form-control" name="password" id="password" value="" placeholder="密码">
                        </div>
                    </div>
                    <div class="form-group ">
                        <div class="input-group col-md-6 col-md-offset-3">
                            <div class="input-group-addon"><span class="glyphicon glyphicon-pencil"></span></div>
                            <input type="text" class="form-control" name="nickname" id="nickname" placeholder="昵称">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-primary">提交更改</button>
                </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

</div>

</body>

</html>
